<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd @mouseenter="mouseenter" v-for="(item,idx) in $store.state.home.menu " :key="idx">
        <i :class="item.type"></i>
        {{item.name}}
        <span class="arrow"></span>
      </dd>
    </dl>
    <div class="detail" v-if="kind" @mouseenter="kindOver" @mouseleave="kintOut">
      <template v-for="(item,idx) in curdetail.child">
        <h4 :key="idx">{{item.title}}</h4>
        <span v-for="v in item.child" :key="v">{{v}}</span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyMenu",
  data() {
    return {
      kind: "",
    };
  },

  computed: {
    curdetail() {
      return this.$store.state.home.menu.filter(item => item.type === this.kind)[0];
    },

  },
  methods: {
    mouseleave() {
      this._timer = setTimeout(() => {
        this.kind = "";
      }, 150);
    },
    mouseenter(e) {
      this.kind = e.target.querySelector("i").className;
    },
    kindOver() {
      clearTimeout(this._timer);
    },
    kintOut() {
      this.kind = "";
    }
  }
};
</script>

<style lang="scss" >
</style>
